﻿@{
	ViewBag.Title = "日志列表";
	Layout = "_LayoutPop";
}

@section header{
	<style>
		.fast-filter .tablink {
			padding-right: 8px;
			padding-left: 2px;
		}
	</style>
}

@*页面视图列表开始*@
<table class="list_table table100 fast-filter">
	<tbody>
		<tr>
			<td style="">
				<i class="icon-filter pure-icon-bu"></i><span>
					显示：<a class="cus_markbai tablink" href="javascript:void(0);" data-ftype="reset" @@click="searchReset">全部</a>
				</span>
				@*<i class="icon-filter pure-icon-bu"></i><span>
						状态：<a class="cus_markbai tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="reset" data-fname="donestate">不限</a>
						<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-fname="donestate" data-fvalue="@((int)BillState.未结算)">待结算</a>
						<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-fname="donestate" data-fvalue="@((int)BillState.待付款)">已结算</a>
					</span>*@
				<i class="icon-filter pure-icon-bu"></i>
				<span>
					时间：<a class="cus_markbai tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="reset" data-fstart="date_s" data-fend="date_e">不限</a>
					<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="nowd">当天</a>
					<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="noww">本周</a>
					<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="nowm">本月</a>
					<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="nowy">本年</a>
					<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="lastw">上周</a>
					<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="lastm">上月</a>
				</span>
			</td>
		</tr>
	</tbody>
</table>
@*页面视图列表结束*@

<div id="searchDiv" style="z-index: 1; display: block; position: relative; margin-top: 3px;" v-show="searchShow">
	<table cellpadding="5" cellspacing="2" class="searchUIBasic padding2" align="center" border="0" style="width:90%;border:none;">
		<tbody>
			<tr>
				<td class="small" nowrap="" align="center">
					@*<span>学校</span>
						<input type="text" class="txtBox" style="width: 230px" v-model.trim="listConditions.oname">
						<button class="pure-button pure-button-share pure-icon-bu" style="width:23px;height:21px;" onclick="openPopOrg(); return false;">
							<i class="icon-search"></i>
						</button>
						<button class="pure-button pure-button-approve pure-icon-bu" style="width: 23px; height: 21px;" title="清除" onclick="clearPopOrg();return false;">
							<i class="icon-remove"></i>
						</button>*@
					<span>日志内容</span>
					<input type="text" class="txtBox" style="width: 180px" v-model.trim="listConditions.content">
					<span>操作员</span>
					<input type="text" class="txtBox" style="width: 100px" v-model.trim="listConditions.logman">
					<span>操作员IP地址</span>
					<input type="text" class="txtBox" style="width: 100px" v-model.trim="listConditions.logmanip">
					@*<span>状态</span>
						@Html.DropDownList("state", ViewBag.StateOptions as IEnumerable<SelectListItem>, "不限", new { v_model = "listConditions.state" })*@
					<span>操作时间</span>
					<input name="date_s" type="text" class="calendar" id="date_s" style="width: 70px;cursor:pointer;" maxlength="19" v-model.trim="listConditions.date_s" />
					<i class="icon-calendar calendar-tgr" id="date_s_tgr"></i>&nbsp;-&nbsp;
					<input name="date_e" type="text" class="calendar" id="date_e" style="width: 70px;cursor:pointer;" maxlength="19" v-model.trim="listConditions.date_e" />
					<i class="icon-calendar calendar-tgr" id="date_e_tgr"></i>
					&nbsp;
					<button class="pure-button pure-button-edit" title="查找" @@click.prevent="listRefresh(1)">
						<i class="icon-search"></i>查找
					</button>
					&nbsp;
					<button class="pure-button pure-button-cancel" title="取消" @@click.prevent="searchReset">
						<i class="icon-rotate-left"></i>重置
					</button>
					&nbsp;&nbsp;
				</td>
			</tr>
		</tbody>
	</table>
</div>
<table class="lvt small table100" style="">
	<tr>
		<td style="padding-left: 30px;" align="left" nowrap>
		</td>
		<td nowrap align="right" valign="middle">
			<table border="0" cellspacing="0" cellpadding="0" class="small">
				<tbody>
					<tr>
						<td style="padding-right: 5px">
							<vue-pagination :total="listData.total" :psize="listData.psize" :pnum="listData.pnum" @@change="pageChangeHandler"></vue-pagination>
						</td>
					</tr>
				</tbody>
			</table>
		</td>
	</tr>
</table>
<div style="width:100%;overflow:auto;">
	<table class="crm-table table100 padding2" cellspacing="1" cellpadding="3" style="table-layout:fixed;">
		<caption v-show="listData.list.length==0">
			暂无数据
		</caption>
		<tr class="windLayerHead">
			<td v-for="(col,idx) in listColumns" :style="col.hdStyles">
				<a class='listFormHeaderLinks' @@click="listSort(col.name)" v-if="col.sort">{{col.title}}<i :class="{'icon-caret-up':listSortColumn.order=='asc','icon-caret-down':listSortColumn.order=='desc'}" v-if="col.name==listSortColumn.name"></i></a>
				<span v-else>{{col.title}}</span>
			</td>
		</tr>
		<tr v-for="(item,idx) in pageList" :rid="item.ID" :class="{'crm-table-plural':idx%2==1}" style="cursor: pointer;">
			<td v-for="(col,cidx) in listColumns" :style="item.Styles[cidx]">
				<a :href="item.Links[cidx].href" v-if="item.Links[cidx].href">{{item[col.name]}}</a>
				<span v-else-if="col.format" v-html="col.format(item[col.name],item)"></span>
				<span v-else>{{item[col.name]}}</span>
			</td>
		</tr>
	</table>
</div>
@*生成列表操作*@
@section footer{
	@*日期必须开始*@
	<script src="~/lib/laydate/laydate.js" asp-append-version="true"></script>
	<script src="~/lib/moment/moment.min.js" asp-append-version="true"></script>
	@*日期必须结束*@
	<script type="text/javascript">
		@* 列表相关开始 *@
		var listConditionsInit = { infoid: "@(ViewBag.InfoID)", tblid:"@(ViewBag.TableID)" };//初始查询条件
		var pageEnumData = {
		};
		var pageData = {
			hideBreadcrumb: false,
			serviceCode: '@(ViewBag.ServiceCode)',
			global: globalData,
			listData: {
				checked:false,
				list: [],
				total: 0,
				pnum: 1,
				psize: 20,
			},
			listColumns: [
				{
					title: "操作时间",
					name: "LogTime",
					hdStyles: {
						width: "120px",
					},
					bdStyles: {
					}
				},
				{
					title: "操作员IP地址",
					name: "LogManIP",
					hdStyles: {
						width: "100px",
					},
					bdStyles: {
					}
				},
				{
					title: "操作员",
					name: "LogManName",
					hdStyles: {
						width: "60px",
						textAlign:"center"
					},
					bdStyles: {
						textAlign:"center"
					}
				},
				{
					title: "日志内容",
					name: "LogContent",
					hdStyles: {
					},
					bdStyles: {
						"word-break": "break-word"
					}
				},
			],
			searchShow:true,
			listConditions: Object.assign({}, listConditionsInit),
			listSortColumn: {
				name: "",
				order:""
			},
			listStyles: {
				@*"StateNow": {
					"@((int)ST.Buz.Base.Enums.BillState.已付款)": { backgroundColor:"#FFCC00"},
					"@((int)ST.Buz.Base.Enums.BillState.已作废)": { backgroundColor:"#FF0000"},
					"@((int)ST.Buz.Base.Enums.BillState.已删除)": { backgroundColor:"#cc4646"},
					"@((int)ST.Buz.Base.Enums.BillState.已退款)": { backgroundColor:"#E2AF08"},
					"@((int)ST.Buz.Base.Enums.BillState.待付款)": { backgroundColor:"#009963"},
					"@((int)ST.Buz.Base.Enums.BillState.未结算)": { },
				}*@
			},
			listColStyles: {
			},
			model: {},
		};

		var pageApp = new Vue({
			el: '#app',
			data: pageData,
			mounted: function () {
				this.listConditions = Object.assign({},this.listConditions, utils.pageRestore());
				this.listRefresh();
			},
			methods: {
				pageChangeHandler: function (args) {
					this.listRefresh(args.pnum, args.psize)
				},
				listFastFilter: function (e) {
					var obj = e.srcElement || e.target;
					$(obj).parent('span').find('.tablink').removeClass('cus_markbai').addClass('cus_markhui');
					$(obj).addClass('cus_markbai');
					switch (obj.dataset.ftype) {
						case "date":
							{
								if (!obj.dataset.fstart || !obj.dataset.fend) {
									return;
								}
								var dts = '';
								var dte = '';
								switch (obj.dataset.fvalue) {
									case "nowd":
										dts = moment().startOf('day').format('YYYY-MM-DD');
										dte = moment().format('YYYY-MM-DD');
										break;
									case "noww":
										dts = moment().startOf('isoWeek').format('YYYY-MM-DD');
										dte = moment().format('YYYY-MM-DD');
										break;
									case "nowm":
										dts = moment().startOf('month').format('YYYY-MM-DD');
										dte = moment().format('YYYY-MM-DD');
										break;
									case "nowy":
										dts = moment().startOf('year').format('YYYY-MM-DD');
										dte = moment().format('YYYY-MM-DD');
										break;
									case "lastw":
										dts = moment().week(moment().week() - 1).startOf('isoWeek').format('YYYY-MM-DD');
										dte = moment().week(moment().week() - 1).endOf('isoWeek').format('YYYY-MM-DD');
										break;
									case "lastm":
										dts = moment().month(moment().month() - 1).startOf('month').format('YYYY-MM-DD');
										dte = moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD');
										break;
								}
								this.listConditions = Object.assign({}, this.listConditions, _defineProperty({}, obj.dataset.fstart, dts),
									_defineProperty({}, obj.dataset.fend, dte));
								this.listRefresh(1);
							}
							break;
						case "reset":
							{
								if (obj.dataset.fname) {
									this.listConditions = Object.assign({}, this.listConditions, _defineProperty({}, obj.dataset.fname, obj.dataset.fvalue));
								} else if (obj.dataset.fstart && obj.dataset.fend) {
									this.listConditions = Object.assign({}, this.listConditions, _defineProperty({}, obj.dataset.fstart, ''),
										_defineProperty({}, obj.dataset.fend, ''));
								}
								this.listRefresh(1);
							}
							break;
						default:
							{
								if (!obj.dataset.fname) {
									return;
								}
								this.listConditions = Object.assign({}, this.listConditions, _defineProperty({}, obj.dataset.fname, obj.dataset.fvalue));
								this.listRefresh(1);
							}
					}
				},
				listRefresh: function (pageNum, pageSize) {
					var _params = Object.assign({}, {
						pnum: pageNum || this.listData.pnum,
						psize: pageSize || this.listData.psize,
						sortorder: !this.listSortColumn.name ? "" : this.listSortColumn.name + "_" + this.listSortColumn.order
					}, this.listConditions);
					utils.pageStore(_params,pageNum,pageSize);
					var _this = this;
					utils.ajaxPost('@(Url.Action("Search", "Sys_TableLog"))', _params, function (resp) {
						var newData = { list: resp.data.list, total: resp.data.total, pnum: resp.data.pnum, psize: resp.data.psize ,checked:false};
						_this.listData = newData;
					}, function (err) {
					})
				},
				searchReset: function () {
					$('.fast-filter').find('.tablink[data-ftype="reset"]').each(function (idx, elem) {
						$(elem).parent('span').find('.tablink').removeClass('cus_markbai').addClass('cus_markhui');
						$(elem).removeClass('cus_markhui').addClass('cus_markbai');
					});
					this.listConditions = Object.assign({}, listConditionsInit);
					this.listSortColumn = {
						col: "",
						order: ""
					};
					this.listRefresh(1);
				},
				searchToggle: function () {
					this.searchShow = !this.searchShow;
				},
				listSort: function (col) {
					if (col != this.listSortColumn.name) {
						this.listSortColumn.order = "desc";
						this.listSortColumn.name = col;
					} else {
						this.listSortColumn.order = this.listSortColumn.order == "asc" ? "desc" : "asc";
					}
					this.listRefresh(1);
				},
			},
			computed: {
				pageList: function () {
					var _this = this;
					return this.listData.list.map(function (item) {
						return Object.assign({}, item, {
							Styles: _this.listColumns.map(function (col) {//列样式
								return Object.assign({}, col.bdStyles, _this.listColStyles[col.name] ? _this.listColStyles[col.name][item[col.name]] : {})
							}),
							Style: {},
							//Style: _this.listStyles.StateNow[item.StateNow],//行样式
							Links: _this.listColumns.map(function (col) {
								return Object.assign({}, { href: col.href ? col.href.replace(/{ID}/g, item.ID) : "" });
							}),
						});
					});
				},
			},
			filters: {
				formatState: function (val) {
					return utils.formatEnum(val, pageEnumData.state);
				}
			}
		});
		@* 列表相关结束 *@

		$(document).ready(function () {
			$('#date_s_tgr').click(function () {
				laydate.render({
					elem: '#date_s'
					, show: true //直接显示
					, closeStop: '#date_s_tgr'
					, done: function (value, date) {
						pageData.listConditions.date_s = value;
					}
				});
			});

			laydate.render({
				elem: '#date_s'
				, closeStop: '#date_s_tgr'
				, done: function (value, date) {
					pageData.listConditions.date_s = value;
				}
			});

			$('#date_e_tgr').click(function () {
				laydate.render({
					elem: '#date_e'
					, show: true //直接显示
					, closeStop: '#date_e_tgr'
					, done: function (value, date) {
						pageData.listConditions.date_e = value;
					}
				});
			});

			laydate.render({
				elem: '#date_e'
				, closeStop: '#date_e_tgr'
				, done: function (value, date) {
					pageData.listConditions.date_e = value;
				}
			});
		});
	</script>
}
